<template>
  <div class="U000026-template1" style="position: relative"
       :class="className">
    <!-- style -->
    <div v-html="css"></div>

    <!--短视频静态-->
    <div class="shortvideo" v-if="datas.preview_color">
      <div class="list" v-if="Number(datas.get_number) > 0 && datas.get_style != 2">
        <div class="list_child" v-for="item in 4">
          <div class="video_box">
            <i class="iconfont icon-bofang" style="font-size: 30px"></i>
          </div>
          <div class="bottom_box">
            <p class="title">视频标题</p>
            <div class="other">
              <div class="user_info">
                <img :src="emptyImage" alt="" class="user_Avatar">
                <div class="user_name">用户名称</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div style="height: 30px;line-height: 30px;font-size: 16px;text-align: center" v-if="(datas.list.length <= 0 && datas.get_style == 2) || (Number(datas.get_number) <= 0 && datas.get_style == 1)">
        暂无设置短视频
      </div>

      <div class="list" v-if="datas.list.length > 0 && datas.get_style == 2">
            <div class="list_child" v-for="item in datas.list">
              <div class="video_box">
                <img :src="item.cover || emptyImage" alt="">
                <i class="iconfont icon-bofang" style="font-size: 30px"></i>
              </div>
              <div class="bottom_box">
                <p class="title">{{item.title}}</p>
                <div class="other">
                  <div class="user_info">
                    <img :src="emptyImage" alt="" class="user_Avatar">
                    <div class="user_name">{{item.member_nickname}}</div>
                  </div>
                </div>
              </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
	import emptyImage from "@/resource/images/banner.png";
	// 自定义样式
	const css = function () {
		if(this.datas.preview_color) {
			const {
				preview_color,
			} = this.datas;

			return `
        .component-${this.id} .shortvideo .list{
            background-color: ${preview_color};
        }
    `;
    }
	};

	export default {
		props: ['id', 'datas', 'styles'],
    data() {
			return{
				emptyImage
      }
    },
    mounted() {
    },
		computed: {
			css() {
				return '<style>' + css.call(this) + '</style>';
			},
			className() {
				const name = ['component-wrapper', `component-${this.id}`];
				return name;
			},
		},
    watch: {},

		methods: {},

	};
</script>

<style lang="less" scoped>
  // 默认
  .component-wrapper {
    display: flex;
    justify-content: center;
    width: 375px;
  }
  .shortvideo{
    width: 100%;
    .list{
      width: 100%;
      padding: 10px 12px;
      display: flex;
      flex-wrap: wrap;
      justify-content:space-between;
      .list_child{
        margin-bottom: 10px;
        width: 170px;
        display: flex;
        flex-direction:column;
        background: #fff;
        border-radius: 5px;
        overflow: hidden;
        .video_box{
          width: 170px;
          height: 225px;
          line-height: 225px;
          text-align: center;
          background: #e3e4e4;
          img {
            width: 100%;
            max-height: 100%;
          }
          i{
            font-size: 16px;
          }
        }
        .bottom_box{
          padding: 10px;
          .title{
            font-size: 14px;
            color: #333;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
          .other{
            display: flex;
            justify-content:space-between;
            align-items:center;
            .user_info{
              display: flex;
              justify-content:space-between;
              align-items:center;
              .user_Avatar{
                width: 18px;
                height: 18px;
                border-radius: 100%;
                margin-right: 6px;
              }
              .user_name{
                width: 60px;
                color: #8c8c8c;
                font-size: 11px;
                overflow: hidden;/*超出部分隐藏*/
                text-overflow:ellipsis;/* 超出部分显示省略号 */
                white-space: nowrap;/*规定段落中的文本不进行换行 */
              }
            }
          }
        }
      }
    }
  }
</style>
